<script type="text/javascript">
//////////////////////////////////
(function( $ ){
	$.fn.modalform = function( options ) {
		var $this = $(this);
		$this.data('init', false);
		
		var settings = {
			ajaxForm: '', // The ajax uri for render the form.
			msgId: 'form-messages', // The messages id div.
			fnClose: '', // Callback function that will be executed when the dialog is closed. Useful for update some data like a table.
			 
		};

		if( options ) {
			$.extend(settings, options);
		}

		// Create the dialog
		var div = $('<div></div>');
		var $dialog = div.dialog({
			autoOpen: false,
			modal: true,
			title: $this.attr('title'),
		});

		// Clear old messages
		var messagesDiv = $("#"+settings.msgId).html('');
		
		// Start
		if(!($this.data('init'))) {
			// Get the form.
			$.get(settings.ajaxForm, function(data){
				// Append the form to the div that is the dialog
				div.append(data);
				// Getting the form and convert it into ajaxForm.
				var form = $(div).find('#focusForm');
				if(form) $this.data('init', true);
				form.ajaxForm(function(data){
					var messagesDiv = $("#"+settings.msgId);
					if(data.errors) {
						$.each(data.errors, function(key, val){
							form.find("[name='"+key+"']").each(function(){
								$(this).next().html(val);
							});
						});
					} else {
						if(messagesDiv) {
							messagesDiv.html(data.message);
							$dialog.dialog('close');
							//$dialog.dialog('destroy');
							div.html('');
							$this.data('init', false);
							if(settings.fnClose) {
								settings.fnClose(true);
							}
						}
					}
				});
				
			});
		}
		$dialog.dialog('open');
	};
})( jQuery );
//////////////////////////////////
$(document).ready(function(){
	var oTable;
	var iId;
	a = function(val) {
		oTable = $("#focus_table").dataTable();
		oTable.fnDraw();
	}

	oTable = $("#focus_table").dataTable({
    	"bPaginate": true,
 		"bLengthChange": false,
 		"sPaginationType": "full_numbers",
 		"bProcessing": true,
 		"bServerSide": true,
 		"bFilter": true,
 		"iDisplayLength" : ${_pageSize?: 10},  
        "sAjaxSource": '@{bluehat.DashBoard.focuses_table}',
        "aoColumns": [
			{"sTitle": "ID", "mDataProp": "id"},
           	{"sTitle": "Titulo", "mDataProp": "title"},
           	{"sTitle": "Description", "mDataProp": "description"},
        ],
        "sAjaxDataProp": "${_sAjaxDataProp ?: 'rows'}",
     });

	 $('#focus_table tbody tr').live('click', function () {
		 var aData = oTable.fnGetData( this );
		 iId = aData.id;
	 });
		
	 
	
	$("#add-link").click(function(){
		var $this = $(this);
		$this.modalform({ajaxForm: $this.attr('href'), fnClose: a});
		return false;
	});
	
	
	$("#select-actions").change(function(){
		var option = $(this).find("option:selected");
		var radio = $(":radio:checked");
		//var id = radio.val();
		var id = iId;
		
		if(option.val() == 1 && id) {
			var fnAction =  #{jsAction @bluehat.FocusController.modalform(':id')/};
			var formURL = fnAction({id: id});
			$(this).modalform({ajaxForm: formURL});			
		}
		if(option.val() == 2 && id) {
			var uriFunction = #{jsAction @bluehat.FocusController.delete(':id')/};
			var url = uriFunction({id: id});
			window.location = url;
		}
	});
});
</script>
<h2>Listado de focus</h2>
<div id="actions">
	<select id="select-actions">
		<option value="">Actions</option> 
		<option value="1">Edit</option> 
		<option value="2">Delete</option>
	</select>
</div>

<div id="add-focus">
   <a id="add-link" href="@{bluehat.FocusController.modalform}" title="Add new Focus">Add new Focus</a>
</div>

<div id="form-messages">
</div>

<table id="focus_table" class="tbl_historico" />

